<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人日记应用</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>个人日记应用</h1>
            <p>记录生活的点滴</p>
        </header>
        
        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="flash-messages">
                    {% for message in messages %}
                        <div class="flash-message">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        
        <!-- 搜索和新建按钮区域 -->
        <div class="search-and-create">
            <form class="search-form" method="get" action="/">
                <input type="text" name="search" placeholder="搜索日记..." value="{{ search_query }}">
                <button type="submit">搜索</button>
            </form>
            <a href="/new" class="create-btn">新建日记</a>
        </div>
        
        <!-- 统计信息区域 -->
        {% if stats.total_entries > 0 %}
            <div class="stats-container">
                <div class="stat-item">
                    <h3>总条目</h3>
                    <p>{{ stats.total_entries }}</p>
                </div>
                <div class="stat-item">
                    <h3>最早记录</h3>
                    <p>{{ stats.date_range[0].split(' ')[0] }}</p>
                </div>
                <div class="stat-item">
                    <h3>最新记录</h3>
                    <p>{{ stats.date_range[1].split(' ')[0] }}</p>
                </div>
                <div class="stat-item">
                    <h3>平均字数</h3>
                    <p>{{ stats.avg_words }}</p>
                </div>
            </div>
        {% endif %}
        
        <!-- 日记列表区域 -->
        <div class="diary-list">
            {% if entries %}
                <h2>我的日记</h2>
                <ul>
                    {% for entry in entries %}
                        <li class="diary-entry">
                            <div class="entry-header">
                                <h3><a href="/edit/{{ entry[0] }}">{{ entry[1] }}</a></h3>
                                <div class="entry-actions">
                                    <a href="/edit/{{ entry[0] }}" class="edit-btn">编辑</a>
                                    <a href="/delete/{{ entry[0] }}" class="delete-btn" onclick="return confirm('确定要删除这篇日记吗？')">删除</a>
                                </div>
                            </div>
                            <div class="entry-meta">
                                <span>创建: {{ entry[3] }}</span>
                                {% if entry[3] != entry[4] %}
                                    <span>更新: {{ entry[4] }}</span>
                                {% endif %}
                            </div>
                            <div class="entry-preview">
                                {{ entry[2][:100] }}{% if entry[2]|length > 100 %}...{% endif %}
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <div class="no-entries">
                    <h2>还没有日记</h2>
                    <p>点击"新建日记"开始记录你的生活点滴吧！</p>
                </div>
            {% endif %}
        </div>
    </div>
</body>
</html>